{% extends 'mockserver.html' %}
{% block bodys %}
    {% import "fenye.html" as macros %}
    <div class="tpl-portlet-components">
        <div class="portlet-title">
            <div class="caption font-green bold" style="margin-top: 5%">
                <span class="am-icon-code"></span> mockserver
            </div>
        </div>
        <div class="mockser" style="margin-top: 5%">
            <div class="tpl-content-page-title">
                {% with messages = get_flashed_messages() %}
                    {% if messages %}
                        <ul class='flashes'>
                            {% for message in messages %}
                                <li style="color:red">{{ message }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                {% endwith %}
            </div>
            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <a onclick="addmock()">
                                    <input type="button" class="am-btn am-btn-default am-btn-success" value="增加">
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
                <table class="am-table am-table-striped am-table-hover table-main " style="">
                    <caption>
                        <strong></strong>
                    </caption>
                    <thead>
                    <tr>
                        <th>接口名</th>
                        <th>接口描述</th>
                        <th>接口路径</th>
                        <th>请求方式</th>
                        <th>类型</th>
                        <th>更新时间</th>
                        <th>是否校验</th>
                        <th>请求头校验</th>
                        <th>状态</th>
                        <th>创建人</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>{% for int in inte %}
                        <tr>
                            <td onclick="show({{ int.id }})">
                                <label class="label-primary" style="background: white">{{ int.name }}
                                </label>
                            </td>
                            <td>
                                <label class="label-primary" style="background: white">{{ int.description }}
                                </label>
                            </td>
                            {% if int.status==1 %}
                                <td>
                                    <a href="{{ url_for('mock.mackserver',path=int.path) }}"
                                       target="_blank">{{ int.path }}</a>
                                </td>
                            {% else %}
                                <td>{{ int.path }}</td>
                            {% endif %}
                            <td onclick="show({{ int.id }})">
                                <label class="label-primary" style="background: white">{{ int.methods }}</label>
                            </td>
                            <td style="width: 10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                <label class="label-primary" style="background: white">{{ int.rebacktype }}
                                </label>
                            </td>
                            <td>
                                <label class="label-primary" style="background: white">{{ (int.update_time) }}</label>
                            </td>
                            {% if int.ischeck ==0 %}
                                <td>否</td>
                            {% elif int.ischeck==1 %}
                                <td>是</td>
                            {% endif %}
                            {% if int.is_headers==0 %}
                                <td>
                                    <label class="label-primary" style="background: white">
                                        <i class="am-icon-check"></i>
                                    </label>
                                </td>
                            {% elif int.is_headers==1 %}
                                <td>
                                    <label class="label-primary" style="background: white">
                                        <i class="am-icon-close"></i>
                                    </label>
                                </td>
                            {% endif %}
                            {% if int.status==0 %}
                                <td>
                                    <label class="label-primary" style="background: white">
                                        <a href="{{ url_for('mock.startmock',id=int.id) }}">
                                            <i class="am-icon-lock"></i>
                                        </a>
                                    </label>
                                </td>
                            {% elif int.status==1 %}
                                <td><label class="label-primary" style="background: white">
                                    <a href="{{ url_for('mock.closemock',id=int.id) }}">
                                        <i class="am-icon-unlock"></i>
                                    </a>
                                </label>
                                </td>
                            {% endif %}
                            <td>
                                <label class="label-primary" style="background: white">{{ int.users }}</label>
                            </td>
                            <td>
                                <span>
                                    <a href="{{ url_for('mock.editmockserver',id=int.id) }}">
                                        <i class="am-icon-edit"></i></a></span>
                                {% if current_user.role_id !=1 and current_user.role_id !=None %}
                                    <span>
                                    <button onclick="deleteproject({{ int.id }})">
                                        <i class="am-icon-remove"></i>
                                    </button>
                                </span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr style="width:10px;display: none" id="{{ int.id }}">
                            <td colspan="8">
                                <div class="tr-detail">
                                    <div class="dt-cont">
                                        <b>请求参数：</b>
                                        <span class="dt-cont-s">{{ int.params|safe }}</span>
                                    </div>
                                    <div class="dt-cont">
                                        <b>预期返回：</b>
                                        <span class="dt-cont-y">{{ int.fanhui|safe }}</span>
                                    </div>
                                    <div class="dt-cont">
                                        <b>请求头：</b>
                                        <span class="dt-cont-y">{{ int.headers|safe }}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div>
                <p class="pagination" style="margin-left: 24%;">
                    {{ macros.pagination_widget(pagination,'.mockservers') }}
                </p>
            </div>
        </div>
    </div>
    <div style="display:none;position:fixed;z-index: 210;width: 800px;top: 100px;left: 20%;box-shadow: 0 0 10px rgba(0,0,0,0.6);border: solid 1px #255c71;border-radius: 5px 5px 0 0;background-color: #9eacb4"
         id="addmock">
        <div style="height: 5px;">添加mock接口</div>
        <div style="background-color: whitesmoke;margin-top: 24px">
            <p>mock接口名字：
                <input type="text" placeholder="请输入mock接口名字" id="name"></p>
            <p> mock接口描述：
                <input type="text" placeholder="请输入mock接口描述" id="desc"></p>
            <p> mock 接口路径：
                <input type="text" placeholder="请输入mock接口路径" id="path"></p>
            <p> mock接口请求方式：
                <select id="meth" class="select2-results">
                    <option>get</option>
                    <option>post</option>
                    <option>delete</option>
                    <option>put</option>
                    <option>push</option>
                </select>
            </p>
            <p>mock接口类型参数：<select id="type">
                <option>json</option>
                <option>xml</option>
            </select>
            </p>
            <p>mock接口请求头：
                <textarea id="headers" style="width: 200px;height: 100px;"></textarea>
            </p>
            <p>mock接口请求参数：
                <textarea id="parm" style="width: 200px;height: 100px;">
                        </textarea>
            </p>
            <p>mock接口返回参数：
                <textarea id="back" style="width: 200px;height: 100px;"></textarea>
            </p>
            <p>mock接口是否校验：<select id="checkout">
                <option>是</option>
                <option>否</option>
            </select>
            </p>
            <p>mock接口是否校验请求头：
                <select id="checkouheaders">
                    <option>是</option>
                    <option>否</option>
                </select>
            </p>
            <p>mock接口是否开启：
                <select id="kaiqi">
                    <option>是</option>
                    <option>否</option>
                </select>
            </p>
        </div>
        <div style="margin-top: 1%;margin-bottom: auto">
            <input value="添加" type="button" class="btn-default" onclick="add_mock()">
            <input value="取消" type="button" class=" btn-default" onclick="guanbi()">
        </div>
    </div>
    <script type="application/javascript">
        function show(id) {
            var obj = document.getElementById(id);
            if (obj.style.display == 'none') {
                obj.style.display = '';
            } else {
                obj.style.display = 'none';
            }
        }

        function addmock() {
            var dakai = document.getElementById('addmock');
            dakai.style.display = '';
        }

        function guanbi() {
            var dakai = document.getElementById('addmock');
            dakai.style.display = 'none'
        }

        function add_mock() {
            var name = document.getElementById('name');
            var desc = document.getElementById('desc');
            var path = document.getElementById('path');
            var headers = document.getElementById('headers');
            var parm = document.getElementById('parm');
            var back = document.getElementById('back');
            var obj = document.getElementById('meth');
            var index = obj.selectedIndex;
            var meth = obj.options[index].value;
            var ob = document.getElementById('type');
            var inde = ob.selectedIndex;
            var type = ob.options[inde].value;
            var obd = document.getElementById('checkout');
            var ind = obd.selectedIndex;
            var checkout = obd.options[ind].value;
            var obds = document.getElementById('checkouheaders');
            var insd = obds.selectedIndex;
            var checkouheaders = obds.options[insd].value;
            var kaiqis = document.getElementById('kaiqi');
            var insds = kaiqis.selectedIndex;
            var kaiqi = kaiqis.options[insds].value;
            if (name.value.length < 1) {
                alert('mock接口的名字不能为空');
            } else {
                if (path.value.length < 1) {
                    alert('mock接口的路径不能为空');
                } else {
                    if (parm.value.length < 1) {
                        alert('mock接口的参数不能为空');
                    } else {
                        if (back.value.length < 1) {
                            alert('mock接口的返回参数不能为空');
                        } else {
                            if (meth.length < 1) {
                                alert('mock接口请求方式不能为空！');
                            } else {
                                var data = {};
                                data['name'] = name.value;
                                data['desc'] = desc.value;
                                data['path'] = path.value;
                                data['headers'] = headers.value;
                                data['parm'] = parm.value;
                                data['back'] = back.value;
                                data['meth'] = meth;
                                data['type'] = type;
                                data['checkout'] = checkout;
                                data['checkouheaders'] = checkouheaders;
                                data['kaiqi'] = kaiqi;
                                $.ajax({
                                    url: '{{ url_for('home.mockserver') }}',
                                    type: 'POST',
                                    data: JSON.stringify(data),
                                    contentType: 'application/json; charset=UTF-8',
                                    processData: false,
                                    success: function (result) {
                                        if (result['code'] == 2) {
                                            alert(result['data']);
                                            location.reload()
                                        } else {
                                            alert(result['data']);
                                        }
                                    }
                                });
                            }
                        }
                    }
                }
            }
        }

        function deleteproject(id) {
            $.ajax({
                url: '{{url_for( 'home.mockserver') }}',
                type: 'DELETE',
                data: id,
                contentType: 'application/json; charset=UTF-8',
                processData: false,
                success: function (data) {
                    if (data['code'] != 2) {
                        alert(data['data'])
                    } else {
                        alert(data['data']);
                        location.reload()
                    }
                }
            })
        }
    </script>
{% endblock %}